<!DOCTYPE html>
<html  lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link th:href="@{/css/pill.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet">
    <title></title>
    <script type="text/javascript" th:src="@{/bootstrap/js/jquery-3.5.1.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js} "></script>


</head>
<body style="background-color: #F5FDF9;" >

<div style="width: 100%;text-align: center;margin-top: 5px;">
    <!-- 第一行 -->
    <div style="width:100%;margin-top: 5px;padding: 3px;">
        <div style="float: left;margin-right: 10px;margin-bottom: 5px;"><button type="button" class="btn btn-danger" style="outline: none;">批量删除</button></div>
        <div style="float: left;line-height: 30px;margin-right: 5px;margin-left: 180px;">
            <p style="float: left;">
                ID：
            </p>
            <input placeholder="请输入用户编号" type="text" style="border-radius: 10px;border-width: 1px;outline: none;"/>
        </div>
        <div style="float: left;line-height: 30px;margin-right: 5px;">
            <p style="float: left;">
                名称：
            </p>
            <input placeholder="请输入用户名称" type="text" style="border-radius: 10px;border-width: 1px;outline: none;"/>
        </div>
        <div style="float: left;line-height: 30px;margin-right: 5px;">
            <p style="float: left;">
                地址：
            </p>
            <input placeholder="请输入用户住址" type="text" style="border-radius: 10px;border-width: 1px;outline: none;"/>
        </div>
        <div style="float: left;">
            <button type="button" class="btn btn-info" style="outline: none;">查询</button>
        </div>

    </div>

    <!-- 表格信息-->
    <div>
        <table class="table table-bordered table-hover"
               data-pagination="true"
               data-side-pagination="client"
               data-page-size="1">
            <thead>
            <tr class="success">
                <th style="background-color:#D1FDDE;text-align:center;border:none;"><input type="checkbox" id="checkAll" name="checkAll" /></th>
                <th style="border: none;text-align: center;background-color: #D1FDDE;">编号</th>
                <th style="border: none;text-align: center;background-color: #D1FDDE;">用户名</th>
                <th style="border: none;text-align: center;background-color: #D1FDDE;">密码</th>
                <th style="border: none;text-align: center;background-color: #D1FDDE;">性别</th>
                <th style="border: none;text-align: center;background-color: #D1FDDE;">用户住址</th>
                <th style="border: none;text-align: center;background-color: #D1FDDE;">电话</th>
                <th style="border: none;text-align: center;background-color: #D1FDDE;">用户余额</th>
                <th style="border: none;text-align: center;background-color: #D1FDDE;">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td style="text-align:center;"><input type="checkbox"  name="checkItem" /></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td style="text-align:center;width: 150px;">
                    <button type="button" class="btn btn-danger" style="float: left;margin-right: 5px;outline: none;">删除</button>
                    <button type="button" class="btn btn-success"style="outline: none;">订单</button>
                </td>
            </tr>

            </tbody>
        </table>
    </div>

    <!-- 分页信息 -->
    <div class="panel-footer" style="text-align: center;background-color: #F5FDF9;border: none;">
        <nav>
            <ul class="pagination pagination-sm">
                <li class="disabled">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

</div>

</body>
</html>
